<template>
    <div>
        <progressbar v-if="$loadingRouteData"></progressbar>
    </div>
    <div class="middle-right" v-if="!$loadingRouteData">
        <h3>我的信息</h3>
        <hr>
        <div class="self-message">
            <div id="ava_wra">
                <ul v-show="ava">
                    <li v-for="item in ava_list" ><img :src="item" v-on:click="toggleAvalist($index)"></li>
                </ul>
            </div>
            <img class="self img-circle" :src="avatar | avatar">
            <ul id="msg_list">
                <li class="short">{{username}}</li>
                <li class="long">{{mobile}}</li>
                <li class="short">{{department | department}}</li>
                <li class="long">{{mail}}</li>
                <li class="short">{{classid}}</li>
                <li class="long">{{dep}}</li>
            </ul>
            <form action="../user/changeInfo" method="post">
                <input type="number" name="avatar" v-modal="avatar" value="{{avatar}}" style="display: none;">
                <label>密码：</label><input class="short" type="password" name="password" v-model="password">
                <label>手机：</label><input type="text" name="mobile" v-model="mobile">
                <label>宿舍：</label><input class="short" type="text" name="roomnumber" v-model="roomnumber">
                <label>邮箱：</label><input type="text" name="mail" v-model="mail">
                <label>学院：</label><input class="short" type="text" name="dep" v-model="dep">
                <label>生日：</label><input type="text" name="birthday" v-model="birthday">
                <button class="btn btn-primary btn-xs" style="float:left;margin-left: 30px;margin-top: 5px;"><span class="glyphicon glyphicon-ok"></span> 提交</button>
            </form>
            <img class="update" src="/dist/img/admin/update.png" alt="更新信息" v-on:click="togglePanel()">
            <div style="clear:both"></div>
        </div>
        <hr />
        <h3 v-show="hasManager">部门主管信息</h3>
        <ul class="master-ul">
            <introbox
                    v-for="manager in manager_list"
                    :meminfo="manager"
            ></introbox>
        </ul>
        <div style="clear:both"></div>
        <hr v-show="hasManager"/>
        <h3 v-show="hasMember">部门员工信息</h3>
        <ul class="staff-ul">
            <introbox
                    v-for="mem in mem_list"
                    :meminfo="mem"
            ></introbox>
        </ul>
        <div class="m-sidePanel">
            <div class="form-inline search">
                <input type="text" placeholder="输入姓名" class="form-control" v-model="name">
                <button class="btn btn-sm" @click="search(name)" @keyup.13="search(name)"><span class="glyphicon glyphicon-search"></span></button>
            </div>
            <ul class="jobList">
                <li>信息部门
                    <ul>
                        <li @click="jobList(5)">新闻部</li>
                        <li @click="jobList(3)">影视部</li>
                        <li @click="jobList(6)">新媒体部</li>
                    </ul>
                </li>
                <li>技术部门
                    <ul>
                        <li @click="jobList(1)">前台美工组</li>
                        <li @click="jobList(2)">后台WEB组</li>
                        <li @click="jobList(9)">APP组</li>
                        <li @click="jobList(7)">产品部</li>
                    </ul>
                </li>
                <li>市场部门
                    <ul>
                        <li @click="jobList(4)">市场部</li>
                        <li @click="jobList(8)">公关部</li>
                    </ul>
                </li>
                <li class="enClick" @click="jobList(0)">EUX</li>
            </ul>
        </div>
    </div>
</template>

<style>
    #ava_wra{
        position: absolute;
    }
    #ava_wra ul{
        position: absolute;
        top: -40px;
        left:0;
        padding: 20px 40px;
        background: rgba(245,245,245,.9);
        width:700px;
        border-radius: 6px;
    }
    #ava_wra ul::after{
        content: '';
        display: block;
        clear: both;
    }
    #ava_wra li{
        float: left;
    }
    #ava_wra img{
        width:95px;
        border-radius: 50%;
        margin: 4px;
        cursor: pointer;
    }
    #ava_wra img:hover{
        border: 4px solid #0a5c75;
    }

    .middle-right{
        height: 100%;
        padding-bottom: 100px;
        overflow: auto;
    }

    .middle-right h3{
        font-size: 18px;
        color: #333742;
        font-weight: bold;
        margin:0;
        margin:50px 0 0 40px;
    }

    .middle-right hr{
        width: 800px;
        height: 1px;
        color: #e5ebee;
        margin-left: 33px;
    }

    .middle-right ul.master-ul{
        max-width: 1200px;
    }
    .middle-right ul.staff-ul{
        max-width: 900px;
    }

    /*个人信息。*/
    .self-message{
        width: 870px;
        /*height: 165px;*/
        position: relative;
    }
    .self-message img.self{
        float: left;
        margin:0 0 10px 85px;
        width: 102px;
    }
    #msg_list{
        margin: 0 0 0 70px;
        float: left;
        /*display: none;*/
    }
    #msg_list li{
        float: left;
        font-size: 18px;
        color: #333742;
        line-height: 35px;
        height: 35px;
    }
    #msg_list li:nth-child(odd){
        min-width: 120px;
        clear: left;
    }
    #msg_list li:nth-child(even){
        width: 313px;
    }
    .self-message img.update{
        float: left;
        margin-top: 35px;
        cursor: pointer;
    }
    .self-message form{
        margin: 0 30px 0 40px;
        float: left;
        display: none;
    }
    .self-message form label{
        float: left;
        margin: 0 0 0 30px;
        color: #707993;
        font-size: 18px;
        width: 55px;
        height: 37px;
        line-height: 37px;
    }

    .self-message form input{
        float: left;
        width: 180px;
        height: 37px;
        line-height: 37px;
        border: none;
        outline: none;
        color: #333742;
        font-size: 18px;
    }
    .self-message form input.short{
        float: left;
        width: 130px;
        border: none;
        outline: none;
        color: #333742;
        font-size: 18px;
    }
    .self-message form input:focus{
        border-bottom: 2px solid #f0f3fe;
    }
    .self-message form label:nth-of-type(odd){
        clear: left;
    }

    .search button{
        background-color: #353841;
        border-radius: 0;
        padding: 7px 12px;
    }
    .search input{
        border-radius: 0;
    }
    .search span{
        color: #fff;
    }

    .jobList {
        padding-left: 8px;
    }

    .jobList li{
        font-size: 16px;
        line-height: 24px;
        font-weight: bold;
        color: #181818;
    }
    .jobList li.enClick{
        cursor: pointer;
    }
    .jobList li ul li{
        font-weight: normal;
        text-indent: 2em;
        cursor: pointer;
    }
    .jobList li ul li:hover{
        background-color: #f5f5f5;
    }
    .m-sidePanel{
        position: fixed;
        background-color: #eee;
        right: -184.5px;
        top: 163px;
        box-shadow: 0 7px 10px #999;
        transition: right .6s;
        border-left: 36px solid #353841;
    }
    .m-sidePanel:hover{
        right: 8px;
    }
</style>

<script>
    import Vue from 'vue';
    import Introbox from '../components/introbox.vue';
    import Progressbar from '../components/progressBar.vue';
    Vue.use(require('vue-resource'));
    Vue.component('introbox',Introbox);
    Vue.component('progressbar', Progressbar);
    Vue.filter('department', function(value){
        var dep_list = ['EUX','前端美工组','后台web组','影视部','市场部','新闻部','新媒体部','产品部','公关部','APP组'];
        return dep_list[parseInt(value)];
    });
    Vue.filter('avatar', function(value){
        var ava_list = ['/dist/img/user/avatar1.jpg','/dist/img/user/avatar2.jpg','/dist/img/user/avatar3.jpg','/dist/img/user/avatar4.jpg','/dist/img/user/avatar5.jpg','/dist/img/user/avatar6.jpg','/dist/img/user/avatar7.jpg','/dist/img/user/avatar8.jpg','/dist/img/user/avatar9.jpg','/dist/img/user/avatar10.jpg','/dist/img/user/avatar11.jpg','/dist/img/user/avatar12.jpg'];
        return ava_list[parseInt(value)];
    });
    export default{
        data(){
            return{
                username: '',
                password: '',
                confirm: '',
                mobile: '',
                roomnumber: '',
                mail: '',
                dep: '',
                department: 0,
                classid: '',
                birthday: '',
                avatar: 1,
                manager_list:null,
                mem_list: null,
                ava: false,
                position: 0,
                ava_list: ['/dist/img/user/avatar1.jpg','/dist/img/user/avatar2.jpg','/dist/img/user/avatar3.jpg','/dist/img/user/avatar4.jpg','/dist/img/user/avatar5.jpg','/dist/img/user/avatar6.jpg','/dist/img/user/avatar7.jpg','/dist/img/user/avatar8.jpg','/dist/img/user/avatar9.jpg','/dist/img/user/avatar10.jpg','/dist/img/user/avatar11.jpg','/dist/img/user/avatar12.jpg'],
                name: '',
                hasManager: true,
                hasMember: true
            }
        },
        methods: {
          togglePanel(){
              var $form = $('.self-message form'),
                      $ul = $('#msg_list'),
                      $img = $('img.self'),
                      $li = $('.self-message ul li');
              if($ul.css('display') === 'block'){

                  $ul.css('display', 'none');
                  $form.css('display', 'block');
                  $('.self-message input').eq(0).focus();
                  $img.bind('click', this.toggleAvalist);
              }
              else if($ul.css('display') === 'none'){
                  $ul.css('display', 'block');
                  $form.css('display', 'none');
                  $img.unbind('click', this.toggleAvalist);
              }
          },
          toggleAvalist(value){
              if(this.ava) this.ava = false;
              else this.ava = true;
              this.avatar = value;
              $('input[name=avatar]').val(value);
          },
            getMembers(dep){
                var tmpurl;
                tmpurl = '../user/depMember?department='+dep+'&position=6';
                this.$http.get(tmpurl, function(data){
                    this.mem_list = data;
                }).error(function(err){
                    console.log(err);
                });
            },
            getManagers(dep){
                var tmpurl;
                tmpurl = '../user/depMember?department='+dep;
                this.$http.get(tmpurl, function(data){
                    this.manager_list = data;
                }).error(function(err){
                    console.log(err);
                });
            },
            jobList(dep){
                this.hasManager = true;
                this.hasMember = true;
                this.getMembers(dep);
                this.getManagers(dep);
            },
            search(name){
                if(name == ''){
                    alert('请输入有效查询条件!')
                } else {
                    var tmpurl = '../user/findUser?username='+name
                    this.$http.get(tmpurl, function(data){
                        this.hasManager = false;
                        this.hasMember = false;
                        this.manager_list = null;
                        this.mem_list = data;
                    })
                }
            }
        },
        ready: function(){
            this.$http.get('../user/detail', function(data) {
                this.username = data.username;
                this.classid = data.classid;
                this.department = data.department;
                this.dep = data.dep;
                this.roomnumber = data.roomnumber;
                this.mobile = data.mobile;
                this.birthday = data.birthday;
                this.mail = data.mail;
                this.avatar = data.avatar;
                this.position = data.position;
                this.department = data.department;
            }).error(function (data, status){
                console.log(data+status);
            });
            this.getMembers(0);
            this.getManagers(this.department);
        }
    }
</script>
